<template>
  <div>
    <el-form-item :prop="prop" v-if="type === 'name'">
      <el-input
        id="login-input"
        :value="value"
        @input="$emit('input', $event)"
        :placeholder="placeholder"
      ></el-input>
    </el-form-item>
    <el-tooltip
      v-model="capsTooltip"
      content="大写锁定已开"
      placement="right"
      manual
    >
      <el-form-item :prop="prop" v-if="type === 'password'">
        <el-input
          id="login-input"
          :value="value"
          :key="passwordType"
          :type="passwordType"
          name="password"
          :placeholder="placeholder"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
          @input="$emit('input', $event)"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
      </el-form-item>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "LoginItem",
  props: {
    type: String,
    prop: String,
    placeholder: String,
    value: [String, Number],
    input: Function
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不能少于6位"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    const validatePassword2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      passwordType: "password",
      capsTooltip: false
    };
  },
  methods: {
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    }
  }
};
</script>

<style lang="scss">
/* reset element-ui css */
#login-input {
  background: transparent;
  border: 0px;
  -webkit-appearance: none;
  border-radius: 0px;
  padding: 12px 5px 12px 15px;
  color: #000 !important;
  height: 50px;
  caret-color: #283443;

  &:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
  }
}
</style>

<style lang="scss" scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: #000;
  cursor: pointer;
  user-select: none;
}

.el-form-item {
  border: 1px solid #e8e8e8;
  margin: 9px 0;
  border-radius: 5px;
  background: #fff;
}

.container {
  .el-input {
    display: inline-block;
    height: 50px;
    width: 100%;
  }
}
</style>
